<template>
  <div class="project-main">
    <div class="item" v-for="item in prolist" :key="item.id">
      <img :src="item.scene_pic_url" alt="">
      <div class="title">{{item.title}}</div>
      <div class="desc">{{item.subtitle}}</div>
      <div class="price">{{item.price_info}} 元起</div>
    </div>
    <div class="foot"></div>
  </div>
</template>

<script>
import project from "@/netapi/project/project.js"
export default {
  name: "ProjectIndex",
  components: {

  },
  data () {
    return {
      prolist:[],
      total:""
    };
  },
  computed: {

  },
  created () {
    this.getTopic()
  },
  mounted () {

  },
  methods: {
  async getAlldata(){
      for (let i = 2; i < this.total+1; i++) {
       
       await project.toPic({page:i}).then(res=>{
       this.prolist=this.prolist.concat(res.data)
       }) 
      }
    },
    getTopic () {
      project.toPic({page:1}).then(res=>{
        console.log(res);
        this.prolist = res.data;
        this.total = res.total;
        this.getAlldata()
      })
    }
  },
};
</script>

<style scoped lang="scss">
.project-main {
  width: 100%;
  .item{
    width: 100%;
    height: 338px;
    border-bottom: 12px solid #F4F4F4;
    text-align: center;
    img{
      width: 100%;
      height: 210px;
    }
    .title{
      margin-top: 20px;
      margin-bottom: 24px;
      font-size: 17px;
      color: rgb(51,51, 51);
    }
    .desc{
      font-size: 12px;
      color: rgb(153,153,153);

    }
    .price{
      margin-top: 18px;
      margin-bottom: 24px;
      font-size: 13px;
      color: rgb(180,40,45);

    }
  }
  .foot{
    width: 100%;
    height: 50px;
  }
}
</style>
